
<!doctype html>
<html>
<head>
	<title>CLGT - Google Admin Theme</title>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
	<link rel="stylesheet" type="text/css" href="./css/bootstrap.css" />
	<link rel="stylesheet" type="text/css" href="./css/bootstrap-responsive.css" />
	<link rel="stylesheet" type="text/css" href="./css/style.css" />
	<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="./js/bootstrap.min.js"></script>
	<script type="text/javascript" src="./js/main.js"></script>
	<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
	<div class="navbar navbar-fixed-top m-header">
		<div class="navbar-inner m-inner">
			<div class="container-fluid">
				<a class="brand m-brand" href="./index.html">Gin</a>
				
	            <form class="form-search m-search span5">
					<input type="text" placeholder="Type to search" class="span5 search-query">
				</form>

				<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
		            <span class="icon-bar"></span>
		            <span class="icon-bar"></span>
		            <span class="icon-bar"></span>
		        </button>
		        
				<div class="nav-collapse collapse">

					<div class="btn-group pull-right">
				        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
			          		<i class="icon-user"></i> Thanh Dang
			          		<span class="caret"></span>
				        </a>
				        <ul class="dropdown-menu">
			          		<li><a href="#"><i class="icon-user"></i>Profile</a></li>
			          		<li><a href="#"><i class="icon-cog"></i>Settings</a></li>
	 		 				<li class="divider"></li>
			          		<li><a href="login.html"><i class="icon-off"></i>Logout</a></li>
				        </ul>
			      	</div>
	          	</div>
			</div>
		</div>
	</div>
	<div class="m-top"></div>
	<aside class="sidebar">
		<ul class="nav nav-tabs nav-stacked">
			<li>
				<a href="index.html">
					<div>
						<div class="ico">
							<img src="./img/ico/ico-home.png">
						</div>
						<div class="title">
							Home
						</div>
					</div>

					<div class="arrow">
						<div class="bubble-arrow-border"></div>
						<div class="bubble-arrow"></div>
					</div>
				</a>
			</li>

			<li class="active">
				<a href="notification.html">
					<span class="badge badge-important m-badge-notification">6</span>
					<div>
						<div class="ico">
							<img src="./img/ico/ico-notification.gif">
						</div>
						<div class="title">
							Notification
						</div>
					</div>

					<div class="arrow">
						<div class="bubble-arrow-border"></div>
						<div class="bubble-arrow"></div>
					</div>
				</a>
			</li>

			<li>
				<a href="form.html">
					<div>
						<div class="ico">
							<img src="./img/ico/ico-setting.gif">
						</div>
						<div class="title">
							Setting
						</div>
					</div>
					<div class="arrow">
						<div class="bubble-arrow-border"></div>
						<div class="bubble-arrow"></div>
					</div>
				</a>
			</li>

			<li class="">
				<a href="order.html">
					<div>
						<div class="ico">
							<img src="./img/ico/ico-order.gif">
						</div>
						<div class="title">
							Order
						</div>
					</div>
					<div class="arrow">
						<div class="bubble-arrow-border"></div>
						<div class="bubble-arrow"></div>
					</div>
				</a>
			</li>

			<li class="">
				<a href="media.html">
					<div>
						<div class="ico">
							<img src="./img/ico/ico-media.gif">
						</div>
						<div class="title">
							Media
						</div>
					</div>
					<div class="arrow">
						<div class="bubble-arrow-border"></div>
						<div class="bubble-arrow"></div>
					</div>
				</a>
			</li>

			<li class="">
				<a href="help.html">
					<div>
						<div class="ico">
							<img src="./img/ico/ico-help.gif">
						</div>
						<div class="title">
							Help
						</div>
					</div>
					<div class="arrow">
						<div class="bubble-arrow-border"></div>
						<div class="bubble-arrow"></div>
					</div>
				</a>
			</li>

			<li class="">
				<a href="#more">
					<div>
						<div class="ico">
							<img src="./img/ico/ico-user.gif">
						</div>
						<div class="title">
							User
						</div>
					</div>
					<div class="arrow">
						<div class="bubble-arrow-border"></div>
						<div class="bubble-arrow"></div>
					</div>
				</a>
			</li>

			<li class="">
				<a href="#more">
					<div>
						<div class="ico">
							<img src="./img/ico/ico-report.gif">
						</div>
						<div class="title">
							Report
						</div>
					</div>
					<div class="arrow">
						<div class="bubble-arrow-border"></div>
						<div class="bubble-arrow"></div>
					</div>
				</a>
			</li>

			<li class="">
				<a href="#" id="btn-more">
					<div>
						<div class="ico">
							<img src="./img/ico/ico-more.png">
						</div>
						<div class="title">
							More
						</div>
					</div>
				</a>

			</li>
	    </ul>
	</aside>
	<div class="m-sidebar-collapsed">
		<ul class="nav nav-pills">
			
		</ul>

		<div class="arrow-border">
			<div class="arrow-inner"></div>
		</div>
	</div>
	<div class="main-container">
		<div class="container-fluid">
			<section>
				<div class="page-header">
					<h1>Notification <small>Styles for success, warning, and error messages</small></h1>
				</div>
				<div class="row-fluid">

					<div class="alert alert-info">
						<button class="close" data-dismiss="alert">x</button>
						<strong>Warning!</strong> You have 4 new messages
						<a href="#">
							<span class="label label-important">Read it!</span>	
						</a>
					</div>

					<div class="alert">
						<button class="close" data-dismiss="alert">x</button>
						<strong>Warning!</strong> You have 50 pending orders
						<a href="#">
							<span class="label label-info">Check it now!</span>	
						</a>
					</div>

				</div>
				<div class="row-fluid">

				</div>
			</section>

			<section>
				<div class="page-header">
					<h1>Badges Indicators and unread counts</h1>
				</div>

				<div class="row-fluid">
					<div class="span12">
						<table class="table table-bordered table-striped">
					        <thead>
					          <tr>
					            <th>Name</th>
					            <th>Example</th>
					            <th>Markup</th>
					          </tr>
					        </thead>
					        <tbody>
					          <tr>
					            <td>
					              Default
					            </td>
					            <td>
					              <span class="badge">1</span>
					            </td>
					            <td>
					              <code>&lt;span class="badge"&gt;1&lt;/span&gt;</code>
					            </td>
					          </tr>
					          <tr>
					            <td>
					              Success
					            </td>
					            <td>
					              <span class="badge badge-success">2</span>
					            </td>
					            <td>
					              <code>&lt;span class="badge badge-success"&gt;2&lt;/span&gt;</code>
					            </td>
					          </tr>
					          <tr>
					            <td>
					              Warning
					            </td>
					            <td>
					              <span class="badge badge-warning">4</span>
					            </td>
					            <td>
					              <code>&lt;span class="badge badge-warning"&gt;4&lt;/span&gt;</code>
					            </td>
					          </tr>
					          <tr>
					            <td>
					              Important
					            </td>
					            <td>
					              <span class="badge badge-important">6</span>
					            </td>
					            <td>
					              <code>&lt;span class="badge badge-important"&gt;6&lt;/span&gt;</code>
					            </td>
					          </tr>
					          <tr>
					            <td>
					              Info
					            </td>
					            <td>
					              <span class="badge badge-info">8</span>
					            </td>
					            <td>
					              <code>&lt;span class="badge badge-info"&gt;8&lt;/span&gt;</code>
					            </td>
					          </tr>
					          <tr>
					            <td>
					              Inverse
					            </td>
					            <td>
					              <span class="badge badge-inverse">10</span>
					            </td>
					            <td>
					              <code>&lt;span class="badge badge-inverse"&gt;10&lt;/span&gt;</code>
					            </td>
					          </tr>
					        </tbody>
					      </table>
					</div>
				</div>
			</section>
		</div>
	</div>
</body>
</html>